<template>
  <div>
    <div style="padding-top:10px">
      <div class="header">
        <div class="header_tit">余额</div>
        <div class="moneyNum">￥{{userInfo.userGoldBalance/10}}</div>
      </div>
      <!-- 充值list -->
      <div class="moneyList_warp">
        <div
          @click="chooseNum(index)"
          v-for="(item , index) in moneyList"
          :key="index"
          :class="{checked:checked==index}"
        >
          <div class="num">{{item.rmb}}元</div>
          <div class="num_">{{item.gold}}Q豆</div>
        </div>
      </div>
    </div>
    <div class="subButton_fat" @click="payOrders()">充值</div>
  </div>
</template>
<script>
import * as API from "@/http/common/api";
import wx from "weixin-js-sdk";
export default {
  name: "topUp",
  data() {
    return {
      checked: 0,
      moneyList: [
        { moneyNum: 10, glodNum: 100 },
        { moneyNum: 10, glodNum: 100 },
        { moneyNum: 10, glodNum: 100 },
        { moneyNum: 10, glodNum: 100 },
        { moneyNum: 10, glodNum: 100 },
        { moneyNum: 10, glodNum: 100 }
      ],
      userInfo: {
        userGoldBalance: 0
      },
      code: null
    };
  },
  methods: {
    chooseNum(e) {
      this.checked = e;
    },
    // 充值Q豆 列表
    getGlodList() {
      this.$http(API.getGoldList, {
        type: "GET",
        params: {}
      }).then(res => {
        if (res.data.code == 0) {
          this.moneyList = res.data.list;
        } else {
          this.$vux.toast.show({
            text: res.data.message,
            type: "text"
          });
        }
      });
    },
    // 充值
    payOrders() {
      this.$http(API.getPrepayId, {
        type: "POST",
        params: {
          openId: this.$localStorage.get("openId"),
          moneyType: this.moneyList[this.checked].rmb,
          spbillCreateIp: this.ip,
          userId: this.userInfo.userId,
          payType: 1 //单独充值1   开通vip 2   开通svip3
        }
      }).then(res => {
        if (res.data.code == 0) {
          wx.config({
            debug: false, // 开启调试模式
            appId: "wx554b0a1adc8cc19c", // 公众号的唯一标识
            timestamp: res.data.message.timeStamp, // 生成签名的时间戳
            nonceStr: res.data.message.nonceStr, // 生成签名的随机串
            signature: res.data.message.paySign, // 签名
            jsApiList: ["chooseWXPay"] // 填入需要使用的JS接口列表，这里是先声明我们要用到支付的JS接口
          });

          //弹出支付窗口
          wx.chooseWXPay({
            timestamp: res.data.message.timeStamp, // 支付签名时间戳，
            nonceStr: res.data.message.nonceStr, // 支付签名随机串，不长于 32 位
            package: res.data.message.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=xxxx）
            signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: res.data.message.paySign, // 支付签名
            success: function(res) {
              this.$http(API.callback, {
                type: "GET",
                params: {}
              }).then(res => {
                 
              });
            },
            cancel: function(res) {
              console.log("支付取消", res);
            },
            fail: function(res) {
              console.log("支付失败", res);
            }
          });
        } else {
          this.$vux.toast.show({
            text: res.data.msg,
            type: "text"
          });
        }
      });
    }
  },
  mounted() {
    this.getGlodList();
    this.code = this.$localStorage.get("code");
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    var cip = returnCitySN["cip"];
    console.log("cip===", cip);
    //给vuedata对象里的字段赋值
    this.ip = cip;
  },
  components: {}
};
</script>
<style scoped>
.moneyList_warp {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 40px 0;
}
.moneyList_warp > div {
  width: 101px;
  height: 63px;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  margin: 8px 5px;
  text-align: center;
  align-items: center;
}
.num {
  font-size: 15px;
  margin: 7px 0;
}
.num_ {
  font-size: 13px;
}
.checked {
  color: #e83263;
  border: 1px solid #e83263 !important;
}
.header {
  width: 336px;
  height: 120px;
  border-radius: 5px;
  margin: 0 auto;
  color: #fff;
  background: #e83263;
  margin-top: 20rpx;
  padding: 30px;
  box-sizing: border-box;
  margin: 0 auto;
}
.header_tit {
  font-size: 13px;
  color: #ffd3df;
  margin-left: 5px;
}
.moneyNum {
  font-size: 25px;
}
.subButton_fat {
  width: 345px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 7.5px;
  margin: 0 auto;
  background: #e83263;
}
</style>
